<template>
  <a-modal
    width="40%"
    v-model="modal2Visible"
    :title="title"
    centered
    @ok="onSubmit"
  >
    <a-spin tip="Loading..." :spinning="spin">
      <a-form-model
        ref="ruleForm"
        :model="form"
        :rules="rules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <a-form-model-item label="设备名称" prop="deviceId">
          <a-select show-search
                    option-filter-prop="children"
                    :filter-option="filterOption"
                    @focus="handleFocus"
                    @blur="handleBlur"
                    @change="handleChange" v-model="form.deviceId" placeholder="请填写巡检设备">
            <a-select-option v-for="(item,index) in list" :key="index" :value="item.id">{{ item.deviceName }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="维护保养人" prop="createBy">
          <a-input
            v-model="form.createBy"
            placeholder="请填写维护保养人"
          />
        </a-form-model-item>
        <a-form-model-item label="维护保养时间" required prop="curingTime">
          <a-date-picker
            v-model="form.curingTime"
            show-time
            type="date"
            @change="curingTimeBtn"
            placeholder="请选择时间"
            style="width: 100%;"
          />
        </a-form-model-item>
        <a-form-model-item label="维护保养内容" prop="curingContent">
          <a-input v-model="form.curingContent" type="textarea" placeholder="请填写保养内容"/>
        </a-form-model-item>
        <a-form-model-item label="备注" prop="remarks">
          <a-input placeholder="请填写备注" v-model="form.remarks" type="textarea"/>
        </a-form-model-item>
        <!-- <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
          <a-button type="primary" @click="onSubmit">Create</a-button>
          <a-button style="margin-left: 10px;" @click="resetForm">Reset</a-button>
        </a-form-model-item>-->
      </a-form-model>
    </a-spin>
  </a-modal>
</template>
<script>
import {sheetAdd} from '@/api/management'
import {list, queryById,query} from "@api/device";

export default {
  data() {
    return {
      title: '填写设备维护单',
      modal2Visible: false,
      spin: true,
      labelCol: {span: 6},
      wrapperCol: {span: 14},
      other: '',
      list: [],
      form: {
        deviceId: undefined, // 设备名称
        curingTime: '', //养护时间
        curingContent: '', // 	养护内容
        remarks: '', //备注
        createBy: '' //维护保养人
      },
      rules: {
        deviceId: [{required: true, message: '请选择设备名称', trigger: 'blur'}],
        curingTime: [{required: true, message: '请填写养护时间', trigger: 'blur'}],
        curingContent: [{required: true, message: '请填写养护内容', trigger: 'blur'}],
        remarks: [{required: true, message: '请填写备注', trigger: 'blur'}],
        createBy: [{required: true, message: '请填写维护保养人', trigger: 'blur'}],
      }
    }
  },
  methods: {
    init(id) {
      this.spin = true
      if (this.title == '填写设备维护单') {
        query().then(res => {
          this.list = res.result
          this.spin = false
        }).catch(err => {
          this.spin = false
        })
        this.resetForm()
      } else if (this.title == '修改设备维护单') {
        list().then(res => {
          console.log(res)
          this.list = res.result
          this.spin = false
        }).catch(err => {
          this.spin = false
        })
        queryById(id).then(res => {
          this.form = res.result
          this.spin = false
        }).catch(err => {
          this.spin = false
        })
      }
    },
    curingTimeBtn(val, data) {
      this.form.curingTime = data
    },
    handleChange(value) {
      console.log(`selected ${value}`);
    },
    handleBlur() {
      console.log('blur');
    },
    handleFocus() {
      console.log('focus');
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },
    setModal1Visible(modal1Visible) {
      this.modal1Visible = modal1Visible
    },
    onSubmit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          sheetAdd(this.form).then(res => {
            if (res.code == 200) {
              this.$message.success('添加成功');
              this.modal2Visible = false
              this.$parent.dataList(1, 10)
            }
          }).catch(err => {
            this.modal2Visible = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm() {
      if (this.$refs.ruleForm !== undefined) {
        this.$refs.ruleForm.resetFields();
      }
    }
  }
}
</script>